<include file="./Template/Admin/header.html" title="单页管理" />
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>单页管理</h5>
                </div>
                <div class="ibox-content">
                    <div class="row m-b-sm m-t-sm">
                        <div class="col-md-2">
                            <a href="{:U('Admin/Page/add')}" class="btn btn-outline btn-primary">添加单页</a>
                        </div>
                    </div>
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th width="2%">ID</th>
                            <th>标题</th>
                            <th>英文名称</th>
                            <th>链接</th>
                            <th>关键词</th>
                            <th>描述</th>
                            <th width="20%">内容</th>
                            <th>排序</th>
                            <th width="14%">操作</th>
                        </tr>
                        </thead>
                        <tbody id="pageView">
                        <!--异步请求分页形式  内容从后台获取-->

                        </tbody>
                    </table>
                    <!--laypage 分页-->
                    <div id="pageList" style="text-align: center;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__ADMIN__js/jquery.min.js"></script>
<script src="__ADMIN__js/bootstrap.min.js"></script>
<script src="__ADMIN__js/plugins/layer.3/layer.js"></script>
<script src="__ADMIN__js/plugins/laypage/laypage.js"></script>
<script src="__ADMIN__js/common.js"></script>

<script>
    $(function(){
        /**
         * 删除产品
         * @param id
         */
        del = function(id){
            common.ajaxDel("{:U('Admin/Page/del')}",id,"{:U('Admin/Page/index')}");
        };


        /**
         * layui  jquery.ajax 异步请求式分页
         */
        //以下将以jquery.ajax为例，演示一个异步分页
        //实现异步分页 则搜索按钮  type改为了button 防止跳转
        var page = 1;
        function demo(curr){
            $.getJSON(
                    "{:U('Admin/Page/pageList')}",
                    {
                        page: curr || 1 //向服务端传的参数，此处只是演示
                    },
                    function(res){
                        document.getElementById('pageView').innerHTML = res.content;
                        //显示分页
                        laypage({
                            cont: 'pageList', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                            pages: res.pages, //通过后台拿到的总页数
                            curr: curr || 1, //当前页
                            skip: true,
                            skin: '#009688',
                            jump: function(obj, first){ //触发分页后的回调
                                if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                                    demo(obj.curr);
                                }
                            }
                        });
                    });
        }
        //运行
        demo();
    });
</script>
</body>
</html>
